import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Button, Icon, Pagination  } from 'antd'
import styles from './List.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'
const confirm = Modal.confirm



class lists extends React.Component {
  state = {
    listid:0
  }
  componentWillReceiveProps(nextProps){
    this.setState({
      listid:nextProps.addroleId
    })
  }
  render() {
    const {
        dataSource, pagination,query,byrole, addroleId, onClose,Account,rolelist,AmountNumber,onDelete,onCopy,onView
    } = this.props
    const listDile=(e)=>{
      if(localStorage.getItem("editNot") == 'true'){
        const roleId={
            roleId:e ==0 ? e: e.id
        }
        if(this.state.listid != e.id){       
          if(e == 0){
            Account()
          }else{
            byrole(roleId,e)
          }
         }
      }else{
        confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editNot",'true')
          },
        });
      }
    }
    let dataSources=dataSource
    for(let x in AmountNumber){
      for(let i =0;i<dataSources.length;i++){
        if(x == dataSources[i].id){
          dataSources[i]["UserNumber"] =AmountNumber[x]
        }
      }
    }
    const stylelist =(e) =>{
      return e== this.state.listid ?styles.listxuan:styles.list
    }
    const onShowSizeChange = (e,i) =>{
      const data = {
        pageSize:JSON.stringify(i),
        page: JSON.stringify(e)
      }
      query(data)
    }
    const edit = (e,item) =>{
        onClose(item)
    }
    const stutaKe=(e)=>{
      let center = ''
      if(e==0){
        center='激活'
      }else{
        center='停用'
      }
      return center
    }
    const handleMenuClick = (item, e) => {
      if(localStorage.getItem("editNot") == 'true'){
        if (e.key === '1') {
          onView(item)
        } else if (e.key === '2') {
          edit(item.id,item)
        }else if(e.key === '3'){
          onCopy(item)
        }else if(e.key === '4'){
          if(item.UserNumber > 0){
            Modal.warning({
              title: '温馨提示',
              content: '该用户下还有管理员，不能删除',
            });
          }else{
            onDelete(item.id)
          }
        }
      }else{
        confirm({
          title: '温馨提示',
          content: '你填写的内容还没保存，确认退出会清空你填写的内容，确认退出编辑吗？',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            localStorage.setItem("editNot",'true')
            handleMenuClick(item,e)
          },
        });
      }
    }
    return (
      <div>
        <div className={pagination>10? styles.listboxs:styles.listboxNO}>
          <div className={stylelist(0)} onClick={e =>listDile(0)}>
              <div className={styles.listCenter} style={{paddingTop:10,paddingBottom:6}}>
                <div className={styles.listTit}>全部用户</div>
                <div><span className={styles.fontcz}>激活</span></div>
              </div>
              <div className={styles.listCenter}>
                <div  className={styles.fontnum}><span style={{fontSize:12}}>用户数：</span></div>
              </div>
            </div>
          {dataSources.map((item,listid ) =>
              <div className={stylelist(item.id)} key={listid} onClick={e =>listDile(item)} >
                <div className={styles.listCenter} style={{paddingTop:10,paddingBottom:6}}>
                  <div className={styles.listTit}>{item.name}</div>
                  <div><span className={styles.fontcz}>{stutaKe(item.status)}</span></div>
                </div>
                <div className={styles.listCenter}>
                  <div  className={styles.fontnum}><span style={{fontSize:12}}>用户数：</span>{item.UserNumber}</div>
                  {/*<div><span className={styles.fontBtn} onclick={e => edit(item)}>编辑</span></div>*/}
                  <div><DropOption onMenuClick={e => handleMenuClick(item, e)} menuOptions={[{ key: '1', name: '查看权限' },{ key: '2', name: '编辑' },{ key: '3', name: '复制' },{ key: '4', name: '删除' }]} /></div>
                </div>
              </div>
            )}
        </div>
        <div className={styles.Pagination} style={{display:pagination>10?'bolck':'none'}}>
          <Pagination defaultCurrent={pagination.current} total={pagination.total} onChange={onShowSizeChange} />
        </div>
      </div>
    );
  }
}


export default lists
